<template>
    <div class="addPage">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
            :size="formSize" status-icon>
            <el-form-item label="添加图片">
                <Uploads :row="ruleForm.photo" @OK="OKdata2" @removeImg="removeImg2"></Uploads>
            </el-form-item>
            <el-form-item label="景区名称" prop="name">
                <el-input v-model="ruleForm.name" />
            </el-form-item>
            <el-form-item label="景区等级">
                <el-input v-model="ruleForm.level" />
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="ruleForm.phone" />
            </el-form-item>
            <el-form-item label="标签">
                <div class="formDivTag">
                    <el-tag v-for="tag in dynamicTags" :key="tag" class="mx-1" closable :disable-transitions="false"
                        @close="handleClose(tag)">
                        {{ tag }}
                    </el-tag>
                    <el-input v-if="inputVisible" ref="InputRef" v-model="inputValue" class="ml-1 w-20" size="small"
                        @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" />
                    <el-button v-else class="button-new-tag ml-1" size="small" @click="showInput">
                        + 添加
                    </el-button>
                </div>
            </el-form-item>
            <el-form-item label="营业时间范围">
                <el-time-picker v-model="timeQuantum" is-range range-separator="-" start-placeholder="开始"
                    end-placeholder="结束" format="HH:mm" value-format="HH:mm" />
            </el-form-item>
            <el-form-item label="注意事项">
                <div style="width: 700px;">
                    <Wangeditor @closeOK="closeOKDataCommodityDetails" :row="ruleForm.mattersNeedAttention">
                    </Wangeditor>
                </div>
            </el-form-item>
            <el-form-item label="景区介绍">
                <div style="width: 700px;">
                    <Wangeditor @closeOK="closeOKdescription" :row="ruleForm.description">
                    </Wangeditor>
                </div>
            </el-form-item>
            <el-form-item label="门店地址">
                <el-input v-model="ruleForm.address" placeholder="请在地图上搜索" disabled>
                </el-input>
                <p style="margin: 0;">地图上搜索</p>
            </el-form-item>
            <el-form-item label="经度">
                <el-input v-model="ruleForm.lon" placeholder="请在地图上搜索" disabled>
                </el-input>
            </el-form-item>
            <el-form-item label="纬度">
                <el-input v-model="ruleForm.lat" placeholder="请在地图上搜索" disabled>
                </el-input>
            </el-form-item>
            <el-form-item label="地图信息">
                <mapActions :mapData="mapData" @OKmap="OKmap"></mapActions>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    确认
                </el-button>
                <el-button @click="closeAdd()">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import mapActions from '@/components/map/index.vue'
import Wangeditor from '@/components/wangeditor/index.vue'
import { onMounted, reactive, ref, nextTick } from 'vue'
import { scenicAreaCenterInfoAdd, scenicAreaCenterInfoUpdate } from '@/api/scenicSpot.js'
import { ElMessage } from 'element-plus'
import Uploads from '@/components/elUploads/index.vue'
import { ElInput } from 'element-plus'


const props = defineProps({
    isAdd: {
        type: Boolean,
        default: true, // 默认值为 true
    },
    row: {
        type: Object,
        default: () => ({}), // 默认值为一个空对象
    },
})
const emit = defineEmits(['closeAdd', 'closeOK'])
const formSize = ref('default')
const ruleFormRef = ref()
const ruleForm = reactive({
    // 图片
    photo: [],
    // 标签
    label: [],
    // 名称
    name: '',
    // 等级
    level: '',
    // 电话
    phone: '',
    // 营业时间范围
    timeQuantum: '',
    // 注意事项
    mattersNeedAttention: '',
    // 介绍
    description: '',
    // 门店地址
    address: '',
    // 经度
    lon: '',
    // 纬度
    lat: '',
})

const rules = reactive(
    {
        name: [
            { required: true, message: '请输入', trigger: 'blur' },
        ]
    })
const timeQuantum = ref([])
// 标签
const inputValue = ref('')
const dynamicTags = ref([])
const inputVisible = ref(false)
const InputRef = ref()
const handleClose = (tag) => {
    dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
}
const showInput = () => {
    inputVisible.value = true
    nextTick(() => {
        InputRef.value.input.focus()
    })
}
const handleInputConfirm = () => {
    if (inputValue.value) {
        dynamicTags.value.push(inputValue.value)
    }
    inputVisible.value = false
    inputValue.value = ''
}

// 地图
const mapData = reactive(
    {
        // 门店地址
        address: '',
        // 经度
        lon: '',
        // 纬度
        lat: '',
    }
)
// 地图数据
const OKmap = (data) => {
    mapData.address = data.name;
    mapData.lon = data.location?.lng;
    mapData.lat = data.location?.lat;
    ruleForm.address = data.name;
    ruleForm.lon = data.location?.lng;
    ruleForm.lat = data.location?.lat;

}

onMounted(() => {
    if (!props.isAdd) {
        ruleForm.photo = props.row.photo; // 初始化表单字段值
        ruleForm.name = props.row.name; // 初始化表单字段值
        ruleForm.mattersNeedAttention = props.row.mattersNeedAttention; // 初始化表单字段值
        ruleForm.description = props.row.description; // 初始化表单字段值
        ruleForm.address = props.row.address; // 初始化表单字段值
        mapData.address = props.row.address;
        let geomObj = {};
        if (props.row.geom) {
            geomObj = JSON.parse(props.row.geom);
        }
        if (geomObj.coordinates) {
            ruleForm.lon = geomObj.coordinates[0];
            ruleForm.lat = geomObj.coordinates[1];
            mapData.lon = geomObj.coordinates[0];
            mapData.lat = geomObj.coordinates[1];
        } else {
            ruleForm.lon = ''
            ruleForm.lat = ''
            mapData.lon = ''
            mapData.lat = ''
        }
        ruleForm.label = props.row.label
        dynamicTags.value = ruleForm.label
        ruleForm.level = props.row.level; // 初始化表单字段值
        ruleForm.phone = props.row.phone; // 初始化表单字段值
        ruleForm.timeQuantum = props.row.timeQuantum; // 初始化表单字段值
        timeQuantum.value = props.row.timeQuantum.split('-')
    }
})
// 注意事项
const closeOKDataCommodityDetails = (data) => {
    ruleForm.mattersNeedAttention = data
}
// 景区介绍
const closeOKdescription = (data) => {
    ruleForm.description = data
}

// 图片上传
const OKdata2 = (url) => {
    ruleForm.photo.push(...url)
}
// 图片-删除
const removeImg2 = (item) => {
    ruleForm.photo = item

}

// 确认
const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            if (props.isAdd) {
                ruleForm.label = dynamicTags.value
                ruleForm.timeQuantum = timeQuantum.value.join('-')
                scenicAreaCenterInfoAdd(ruleForm).then(res => {
                    if (res.code == 200) {
                        ElMessage({
                            type: 'success',
                            message: '添加成功',
                        })
                        emit('closeOK')
                    }
                })
            } else {
                scenicAreaCenterInfoUpdate({ ...ruleForm, id: props.row.id }).then(res => {
                    if (res.code == 200) {
                        ElMessage({
                            type: 'success',
                            message: '修改成功',
                        })
                        emit('closeOK')
                    }
                })
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}

// 关闭
const closeAdd = () => {
    emit('closeAdd')
}
</script>

<style lang="scss" scoped>
.formDivTag {
    ::v-deep .is-closable {
        margin-right: 10px;
    }
}

::v-deep .el-input {
    width: 200px !important;
}

.addPage {
    width: 100%;
    height: 750px;
    overflow-y: auto;
}
</style>